import React from 'react'
import { Overlay,Button, Field, Form } from 'react-vant';
import { Area } from 'react-vant';
import { areaList } from '@vant/area-data';


function Addressalert() {
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log(values);
    };

    return (
        <div>
            <Overlay visible={true} >
                <div className='cont'>
                    <span>✖</span>
                    <div>
                        新增地址
                    </div>
                    <div>
                        <Form
                            form={form}
                            showValidateMessage={false}
                            onFinish={onFinish}
                            footer={
                                <div style={{ margin: '16px 16px 0' }}>
                                    <Button round nativeType="submit" type="primary" block>
                                        提交
                                    </Button>
                                </div>
                            }
                        >
                            <Form.Item
                                tooltip={{
                                    message:
                                        '用户名是唯一的',
                                }}
                                intro="确保这是唯一的用户名"
                                rules={[{ required: true, message: '请填写用户名' }]}
                                name="name"
                                label="用户名"
                            >
                                <Field placeholder="请输入用户名" />
                            </Form.Item>
                            <Form.Item
                                tooltip={{
                                    message:
                                        '手机号是必填项',
                                }}
                                intro="确保这是在用的手机号"
                                rules={[{ required: true, message: '请填写手机号' }]}
                                name="phone"
                                label="手机号"
                            >
                                <Field placeholder="请输入手机号" />
                            </Form.Item>
                            <Form.Item>
                                <Area title="标题" areaList={areaList} />
                            </Form.Item>
                            <Form.Item
                                tooltip={{
                                    message:
                                        '详细地址是必填项',
                                }}
                                intro="确保这是自己的详细地址"
                                rules={[{ required: true, message: '请填写详细地址' }]}
                                name="address"
                                label="详细地址"
                            >
                                <Field placeholder="请输入详细地址" />
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </Overlay>
        </div>
    )
}

export default Addressalert